<script setup lang="ts">

import {useUserManageStore} from "@/stores/userManageStore.js";
import {onMounted} from "vue";

const userManageStore=useUserManageStore();

onMounted(()=>{
  userManageStore.getAllUserInfo(1,10);
  console.log(userManageStore.allUserInfo);
})

// 时间戳变成真实时间
function getDate(time: number) {
  let date = new Date(time);
  let Y=date.getFullYear()+'年';
  let M=(date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '月';
  let D=date.getDate()+'日';
  // let h=date.getHours()+'时';
  // let m=date.getMinutes()+'分';
  // return Y+M+D+h+m;
  return Y+M+D;
}


</script>

<template>

<!--  <div>
    <div class="equipmentController">
      <div class="m-4">
        <div class="m-4">
          <el-cascader
              placeholder="请选择设备类型"
              :options="equipmentTypeStore.fullEquipmentType"
              filterable
              v-model="typeValueList"
              @change="getEquipmentByTypeName"
              clearable
              style="margin-right: 20px"
          />
          <el-input v-model="multifunctionName" clearable style="width: 350px" placeholder="请输入设备名称/品牌/创建人/修改人/编码/类型" @clear="reloadAllEquipmentList"  />&nbsp;
          <el-button type="info" size="small" @click="getListByMultifunctionName">名称查询</el-button>
          <el-button type="danger" size="small" @click="router.push({'path':'/home/equipment/equipmentTransfer'})">设备出场表单列表</el-button>
          <el-button type="danger" size="small" @click="router.push({'path':'/home/equipment/saveOneEquipment'})">添加新设备</el-button>
        </div>
      </div>
    </div>
  </div>-->

<!--    分页显示设备数据-->
<!--  <div class="demo-pagination-block" style="float: right">
    <el-pagination
        v-model:current-page="current"
        v-model:page-size="pageSize"
        :page-sizes="[10, 15, 30, 45]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="equipmentStore.equipmentCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>-->

  <!-- 对表格中的字段排序，在表格属性中添加:default-sort,后面参数是需要排序的字段，
       order:后面是排序要求,这里是descending,然后在需要排序的列元素中添加sortable属性-->
  <div >
    <el-table
        :data="userManageStore.allUserInfo"
        style="width: 100%"
        stripe
        border
        max-height="800"
        :default-sort="{prop:'id',order:'ascending',}"
        align="center"
    >
      <el-table-column prop="id" fixed label="ID" width="100" align="center">
      </el-table-column>
      <el-table-column prop="loginName"  label="用户名" width="180" align="center">
      </el-table-column>
<!--      <el-table-column prop="password" label="密码" width="110" >
      </el-table-column>-->
      <el-table-column prop="realName" label="姓名" width="180" align="center" >
<!--        这里可以跳转到一个-->
        <template #default="scope">
          <a :href="`http://www.baidu.com`" target="_blank">{{scope.row.realName}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话号码" width="160" align="center">
      </el-table-column>
      <el-table-column prop="email" label="电子邮件" width="260" align="center">
      </el-table-column>
      <el-table-column prop="profilephoto"  label="头像" width="100"  align="center">
<!--        插入图像，用这种办法，vue3中，要建立一个template,参数是#default="scope"就能获取到这行表格的pro数据scope.row-->
        <template #default="scope">
          <el-image style="width: 50px; height: 50px" :lazy="true" :src="scope.row.profilephoto"  align="center"/>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="用户注册时间" width="150" align="center">
        <template #default="scope">
          {{getDate(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="用户信息修改时间" width="150" align="center">
        <template #default="scope">
          {{getDate(scope.row.updateTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="createBy" label="用户创建人" width="150" align="center">
      </el-table-column>
      <el-table-column prop="lastUpdateBy" label="最后修改人" width="150" align="center">
      </el-table-column>



<!--      <el-table-column prop="location" label="设备所在地" width="280">
      </el-table-column>
      <el-table-column prop="description" label="备注" width="360">
      </el-table-column>-->
<!--      <el-table-column  label="操作" width="420" fixed="right" align="center">
        &lt;!&ndash;  在操作这一栏，添加一个template元素，加一个#default属性，通过这个属性，获取到这一行的数据，是个对象
                     scope：就是el-table表格中被选中的那一行的数据，通过scope获取到该行的数据&ndash;&gt;
        <template #default="scope">
          <el-button size="small" type="warning" plain  @click="router.push({path:`/home/equipment/equipmentDetail/${scope.row.id}`});">详情</el-button>
          <el-button size="small" type="warning" plain  @click="router.push({path:`/home/equipment/saveOneEquipmentTransfer/${scope.row.id}`})">转场</el-button>
        </template>
      </el-table-column>-->
    </el-table>
  </div>













</template>

<style scoped lang="scss">

</style>